<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<view class="s_box">
					<view class="left">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/shopowner/search.png" mode="aspectFit"></image>
						</view>
						<input class="uni-input font28" focus placeholder="门店名称" placeholder-style="font-size: 28rpx;"
							@blur="blur" />
					</view>
					<view class="title font28" @click="getData">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in shopList" :key="index">
					<view class="left">
						<view class="name font28 fontw">
							{{item.title}}
						</view>
						<view class="time font28 fontw">
							日期 {{$u.timeFormat(item.create_time, 'yyyy-mm-dd')}}
						</view>
					</view>
					<view class="revenue font28 font500">
						<text>门店营收</text>{{item.total_price}}
					</view>
					<view class="number font28 font500">
						<text>门店人数</text>{{item.coach_num}}
					</view>
					<view class="add font28 font500">
						<text>门店位置</text>{{item.address}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onPageScroll() {

		},
		computed: {},
		data() {
			return {
				scrollTop: 0,
				// 表示value等于这些值，就属于默认值
				shopList: [],
				// 筛选结果
				keyword: ''
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				let data = await this.$api.shopowner.allStoreList({
					keyword: this.keyword
				})
				this.shopList = data
			},
			scrolltolower() {

			},
			blur(e) {
				this.keyword = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			padding-top: 33rpx;
			background-color: #fff;
			padding-bottom: 18rpx;
			margin-bottom: 18rpx;

			.search {
				padding: 0 20rpx 0 35rpx;

				.s_box {
					background: #F5F5F5;
					border-radius: 50rpx;
					padding: 20rpx 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.icon {
							width: 24rpx;
							height: 26rpx;
							margin-right: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
							}
						}

						.uni-input {}
					}

					.title {
						color: #333333;
					}
				}
			}

			.drop_down {
				/deep/.uv-sticky {
					.uv-sticky__content {
						.uv-drop-down {
							border-bottom: unset;
						}
					}
				}
			}

		}

		.box {
			padding: 0 30rpx;

			.scroll-Y {
				height: calc(100vh - var(--status-bar-height) - 204rpx);

				.item {
					padding: 45rpx 32rpx 48rpx 25rpx;
					background-color: #fff;
					margin-bottom: 13rpx;

					.left {
						justify-content: space-between;
						margin-bottom: 53rpx;

						.name {}

						.time {}
					}

					.revenue {
						display: flex;
						align-items: center;
						margin-bottom: 28rpx;
						color: #FF4200;

						text {
							display: block;
							color: #A1A7B2;
							width: 182rpx;
						}
					}

					.number {
						display: flex;
						align-items: center;
						margin-bottom: 28rpx;

						text {
							display: block;
							color: #A1A7B2;
							width: 182rpx;
						}
					}

					.add {
						display: flex;
						align-items: center;

						text {
							display: block;
							color: #A1A7B2;
							width: 182rpx;
						}
					}
				}
			}
		}
	}
</style>